import React, { Component } from 'react'
import RouterView from '../router/RouterView'
import { RouterItem } from "../types/router.d"
import { Menu,MenuProps} from 'antd';
import {RouteComponentProps} from 'react-router-dom'
import {PieChartOutlined} from '@ant-design/icons';
type MenuItem = Required<MenuProps>['items'][number];
function getItem(
  label: React.ReactNode,
  key: React.Key,
  icon?: React.ReactNode,
  children?: MenuItem[],
  type?: 'group',
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
    type,
  } as MenuItem;
}
const items: MenuItem[] = [
  getItem('树洞一下', '/home/homePage', <PieChartOutlined />),
  getItem('今天学到了', '/home/classify', <PieChartOutlined />),
  getItem('一图胜千言', '/home/jingxi', <PieChartOutlined />),
  getItem('伯贤', '/home/shop', <PieChartOutlined />),
  getItem('登录', '/home/my', <PieChartOutlined />),
];

interface RouteTYPE extends RouteComponentProps{
  routerConfig:RouterItem[]
}

  export class Home extends Component<RouteTYPE> {
    render() {
      const { routerConfig } = this.props
      const toPage=(item:MenuItem)=>{
        this.props.history.push((item&&item.key) as string)
      }
      return (
        <div className='home'>
          <div className="left">
            <Menu
              onClick={(item)=>toPage(item)}
              defaultSelectedKeys={['/home/homePage']}
              mode="inline"
              theme="dark"
              items={items}
            />
          </div>
          <div className="right">
            <RouterView routerConfig={routerConfig}></RouterView>
          </div>
        </div>
      )
    }
  }

  export default Home